<template>
	<view class="page">
		<view class="brand-header"></view>
		<view class="card card-hover fancy-border" style="margin-top:-80rpx; padding:20rpx;">
			<view class="hero" v-if="result">
				<image v-if="illustrationUrl" class="hero-illus" :src="illustrationUrl" mode="aspectFill"></image>
				<view class="type-badge">{{ result.type }}</view>
				<text class="hero-title">{{ typeTitle }}</text>
				<text class="hero-sub text-muted">{{ summaryLine }}</text>
				<view class="badge-row">
					<view class="split-badge"><text>E</text><view class="split-track"><view class="split-fill" :style="{width:(result.dimensions.EI||0)+'%'}"></view></view><text>I</text></view>
					<view class="split-badge"><text>S</text><view class="split-track"><view class="split-fill" :style="{width:(result.dimensions.SN||0)+'%'}"></view></view><text>N</text></view>
					<view class="split-badge"><text>T</text><view class="split-track"><view class="split-fill" :style="{width:(result.dimensions.TF||0)+'%'}"></view></view><text>F</text></view>
					<view class="split-badge"><text>J</text><view class="split-track"><view class="split-fill" :style="{width:(result.dimensions.JP||0)+'%'}"></view></view><text>P</text></view>
				</view>
				<view class="tags">
					<text class="tag-chip" v-for="(t,i) in tags" :key="'tag'+i">{{ t }}</text>
				</view>
			</view>
			<text class="title">测评结果</text>
			<view v-if="!result" class="empty">暂无结果，请先完成测评。</view>
			<view v-else>
				<!-- 类型特色卡片 -->
				<view class="feature-card fancy-border">
					<text class="feature-title">类型画像</text>
					<view class="feature-paras">
						<text class="feature-desc">{{ featureDesc }}</text>
						<text class="feature-desc">{{ featureDesc2 }}</text>
					</view>
				</view>
				<!-- 维度卡片 -->
				<view class="dim-grid">
					<view class="dim-card fancy-border" v-for="d in dimList" :key="d.key">
						<view class="dim-head">
							<text class="dim-name">{{ d.icon }} {{ d.name }}</text>
							<text class="dim-pct">{{ d.value }}%</text>
						</view>
						<view class="track"><view class="fill" :style="{width: d.value + '%'}"></view></view>
						<text class="dim-desc text-muted">{{ d.desc }}</text>
					</view>
				</view>
				<!-- 解读分组 -->
				<view class="section sep">
					<text class="section-title">✨ 性格亮点</text>
					<view class="bullet-list">
						<text class="bullet" v-for="(h,i) in highlights" :key="'h'+i">• {{ h }}</text>
					</view>
				</view>
				<view class="section sep">
					<text class="section-title">⚠️ 可能的盲点</text>
					<view class="bullet-list">
						<text class="bullet" v-for="(w,i) in watchouts" :key="'w'+i">• {{ w }}</text>
					</view>
				</view>
				<view class="section sep">
					<text class="section-title">🧭 建议</text>
					<view class="bullet-list">
						<text class="bullet" v-for="(s,i) in suggestions" :key="'s'+i">• {{ s }}</text>
					</view>
				</view>
				<!-- 新增分组：适配领域与沟通偏好 -->
				<view class="section sep">
					<text class="section-title">💼 适配领域与角色</text>
					<view class="bullet-list">
						<text class="bullet" v-for="(r,i) in roles" :key="'r'+i">• {{ r }}</text>
					</view>
				</view>
				<view class="section">
					<text class="section-title">🗣️ 沟通偏好</text>
					<view class="bullet-list">
						<text class="bullet" v-for="(c,i) in comms" :key="'c'+i">• {{ c }}</text>
					</view>
				</view>
				<!-- 动作 -->
				<view class="actions">
					<button class="btn btn-primary btn-pill btn-wide" @click="again">再次测评</button>
					<button class="btn btn-ghost btn-pill btn-wide" @click="goHome">回到首页</button>
				</view>
				<view class="disclaimer text-muted">提示：本测评仅供参考，不作为任何诊断依据。</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() { return { result: null, illustrationUrl: '' } },
		onShow() {
			try { this.result = uni.getStorageSync('last_mbti_result') || null } catch(e) { this.result = null }
			this.loadIllustration()
		},
		computed: {
			typeTitle(){ if(!this.result) return ''; return this.mapTypeTitle(this.result.type) },
			summaryLine(){ if(!this.result) return ''; const d=this.result.dimensions||{}; return `外向/内向(EI) ${d.EI||0}% · 实感/直觉(SN) ${d.SN||0}% · 思考/情感(TF) ${d.TF||0}% · 判断/感知(JP) ${d.JP||0}%` },
			dimList(){ if(!this.result) return []; const d=this.result.dimensions||{}; return [
				{ key:'EI', name:'EI 外向/内向', value: d.EI||0, desc: this.descFor('EI', d.EI||0), icon:'⚡' },
				{ key:'SN', name:'SN 实感/直觉', value: d.SN||0, desc: this.descFor('SN', d.SN||0), icon:'🔎' },
				{ key:'TF', name:'TF 思考/情感', value: d.TF||0, desc: this.descFor('TF', d.TF||0), icon:'🧠' },
				{ key:'JP', name:'JP 判断/感知', value: d.JP||0, desc: this.descFor('JP', d.JP||0), icon:'📅' }
			] },
			tags(){ if(!this.result) return []; return this.buildTags(this.result.type) },
			featureDesc(){ if(!this.result) return ''; return this.buildFeatureDesc(this.result.type) },
			featureDesc2(){ if(!this.result) return ''; return this.buildFeatureDesc2(this.result.type) },
			highlights(){ if(!this.result) return []; return this.buildHighlights(this.result) },
			watchouts(){ if(!this.result) return []; return this.buildWatchouts(this.result) },
			suggestions(){ if(!this.result) return []; return this.buildSuggestions(this.result) },
			roles(){ if(!this.result) return []; return this.buildRoles(this.result.type) },
			comms(){ if(!this.result) return []; return this.buildComms(this.result) }
		},
		methods: {
			again(){ uni.redirectTo({ url: '/pages/mbti/index' }) },
			goHome(){ uni.reLaunch({ url: '/pages/index/index' }) },
			loadIllustration(){
				if(!this.result || !this.result.type){ this.illustrationUrl = '/static/logo.png'; return }
				uni.request({ url: '/static/illustrations.json', success: (res)=>{
					const map = (res && res.data) || {}
					this.illustrationUrl = map[this.result.type] || '/static/logo.png'
				}, fail: ()=>{ this.illustrationUrl = '/static/logo.png' } })
			},
			mapTypeTitle(t){
				const dict={
					'INTJ':'战略家','INTP':'逻辑学家','ENTJ':'指挥官','ENTP':'辩论家',
					'INFJ':'提倡者','INFP':'调停者','ENFJ':'主人公','ENFP':'竞选者',
					'ISTJ':'物流师','ISFJ':'守护者','ESTJ':'总经理','ESFJ':'执政官',
					'ISTP':'鉴赏家','ISFP':'探险家','ESTP':'企业家','ESFP':'表演者'
				};
				return dict[t] || '个性画像';
			},
			descFor(dim, v){
				const hi = v>=65, lo = v<=35;
				if(dim==='EI') return hi ? '偏外向：能量来自互动与表达' : (lo ? '偏内向：能量来自独处与深思' : '外向/内向较均衡');
				if(dim==='SN') return hi ? '偏实感：重视事实、细节与可行路径' : (lo ? '偏直觉：关注可能性与宏观图景' : '实感/直觉较均衡');
				if(dim==='TF') return hi ? '偏思考：强调逻辑与一致性' : (lo ? '偏情感：重视人际与感受' : '思考/情感较均衡');
				if(dim==='JP') return hi ? '偏判断：计划性强、偏确定' : (lo ? '偏感知：灵活弹性、拥抱变化' : '判断/感知较均衡');
				return '';
			},
			buildTags(type){
				const base={ INTJ:['战略','克制','长远'], INTP:['理性','分析','好奇'], ENTJ:['领导','目标','执行'], ENTP:['辩思','创变','敏捷'],
					INFJ:['共情','愿景','洞察'], INFP:['理想','温和','价值'], ENFJ:['组织','鼓舞','协调'], ENFP:['热情','创意','连结'],
					ISTJ:['谨慎','秩序','可靠'], ISFJ:['守护','耐心','细致'], ESTJ:['管理','制度','效率'], ESFJ:['周全','亲和','服务'],
					ISTP:['冷静','动手','解决'], ISFP:['敏感','美感','随性'], ESTP:['干练','行动','果断'], ESFP:['表达力强','活力','乐趣'] };
				return base[type] || ['专注','稳健','成长'];
			},
			buildFeatureDesc(type){
				const m={ INTJ:'擅长构建长期策略与系统化方案，重视效率与一致性。', INTP:'偏好逻辑推理与原理探索，享受独立思考。', ENTJ:'目标导向与组织协调兼备，善于驱动团队达成结果。', ENTP:'喜欢辩证与尝试，快速迭代中寻找更优解。',
					INFJ:'具备同理与洞察，能将价值观融入愿景并持续推进。', INFP:'以价值为先，追求真诚表达与内在一致。', ENFJ:'擅长凝聚共识，推动协作与成长。', ENFP:'富于热情与创意，善于连结人与想法。',
					ISTJ:'重视秩序与规范，稳健执行，值得信赖。', ISFJ:'关注细致与他人需求，是可靠的支持者。', ESTJ:'强调制度与结果，擅长管理资源。', ESFJ:'亲和周到，善于营造互助氛围。',
					ISTP:'冷静客观，动手能力强，聚焦问题解决。', ISFP:'敏感审美，追求真实体验与和谐。', ESTP:'行动导向，乐于在变化中果断决策。', ESFP:'表达力强，带来活力与乐趣。' };
				return m[type] || '你展现出独特的优势组合，建议结合情境扬长避短。';
			},
			buildFeatureDesc2(type){
				const m={ INTJ:'在复杂情境中保持自洽判断，倾向系统性优化流程。', INTP:'乐于拆解本质问题，在原理层面寻找突破点。', ENTJ:'善于设定节拍器与目标闭环，调动资源高效达成。', ENTP:'热衷跨界迁移与试错，在博弈中快速学习升级。',
					INFJ:'能在矛盾中寻找价值平衡，引导群体走向共识。', INFP:'以价值为北极星，追求人与事的真诚与一致。', ENFJ:'擅于激发潜力与协同，把个体力量编织成团队合力。', ENFP:'以连结与创意点亮场域，推动变化与新可能。',
					ISTJ:'可靠稳健，注重可复现流程与风险控制。', ISFJ:'细致体贴，擅长让系统保持顺滑与有序。', ESTJ:'驱动结果，建立清晰标准与追踪机制。', ESFJ:'建立信任与归属，促进良好的团队氛围。',
					ISTP:'在不确定中保持冷静，迅速制定可行解。', ISFP:'追求真实体验与美感，将人本与细节统一。', ESTP:'快速洞察机会并果断行动，乐于承担责任。', ESFP:'以感染力创造积极体验，提升整体参与度。' };
				return m[type] || '你在不同场景展现出稳定的优势与特质。';
			},
			buildHighlights(r){
				const d=r.dimensions||{}; const list=[];
				if((d.EI||0)>=65) list.push('善于社交与组织，能量充沛'); else if((d.EI||0)<=35) list.push('深度思考，专注力强');
				if((d.SN||0)>=65) list.push('注重细节与落地，执行稳健'); else if((d.SN||0)<=35) list.push('前瞻视野，善于联想创新');
				if((d.TF||0)>=65) list.push('逻辑清晰，决策自洽'); else if((d.TF||0)<=35) list.push('同理心强，擅长协调');
				if((d.JP||0)>=65) list.push('计划有序，结果导向'); else if((d.JP||0)<=35) list.push('灵活适应，拥抱变化');
				return list;
			},
			buildWatchouts(r){
				const d=r.dimensions||{}; const list=[];
				if((d.EI||0)>=80) list.push('过度外向可能忽视细节与自省'); else if((d.EI||0)<=20) list.push('过度内向可能错失人脉与协作');
				if((d.SN||0)>=80) list.push('过分求实可能限制想象空间'); else if((d.SN||0)<=20) list.push('过度理想可能忽略现实约束');
				if((d.TF||0)>=80) list.push('过度理性可能显得不近人情'); else if((d.TF||0)<=20) list.push('过度迁就可能影响决策质量');
				if((d.JP||0)>=80) list.push('过分确定可能降低灵活度'); else if((d.JP||0)<=20) list.push('过度弹性可能影响交付确定性');
				return list;
			},
			buildSuggestions(r){
				const d=r.dimensions||{}; const list=[];
				if((d.EI||0)>=50) list.push('设置定期复盘时间，平衡外部输入与内在沉淀'); else list.push('制定轻量社交目标，逐步扩大舒适圈');
				if((d.SN||0)>=50) list.push('在流程中留出“探索时段”，尝试新方法'); else list.push('为愿景设置里程碑与量化指标');
				if((d.TF||0)>=50) list.push('关键决策前做“影响评估”，兼顾人/事'); else list.push('建立“证据清单”，提升论证质量');
				if((d.JP||0)>=50) list.push('在计划中保留缓冲，允许必要的迭代'); else list.push('为开放流程设定节拍器与时间盒');
				return list;
			},
			buildRoles(type){
				const m={ INTJ:['策略/咨询','架构/产品规划','研究/数据建模'], INTP:['算法/研究','系统设计','知识工程'], ENTJ:['管理/运营','项目群驱动','业务拓展'], ENTP:['创新/增长','用户研究','跨界策划'],
					INFJ:['用户成功','品牌/内容','组织发展'], INFP:['教育/公益','内容创作','设计相关'], ENFJ:['人力/教练','培训/协调','社区运营'], ENFP:['BD/市场','创意策划','产品体验'],
					ISTJ:['质控/风控','运维/流程','财务/法务'], ISFJ:['客户支持','文控/运营','行政支持'], ESTJ:['PMO/管理','供应链/执行','大客户'], ESFJ:['公关/客服','用户关系','活动组织'],
					ISTP:['工程实施','安全/应急','故障排查'], ISFP:['视觉/交互','工艺/手作','用户体验'], ESTP:['销售/渠道','现场推进','危机处理'], ESFP:['主持/内容','体验营销','活动策划'] };
				return m[type] || ['泛产品/运营','学习与成长方向'];
			},
			buildComms(r){
				const d=r.dimensions||{}; const arr=[];
				arr.push((d.EI||0)>=50 ? '倾向口头表达与群体讨论' : '倾向书面表达与深度一对一');
				arr.push((d.SN||0)>=50 ? '偏好事实与步骤，喜欢明确流程' : '偏好愿景与脉络，鼓励发散讨论');
				arr.push((d.TF||0)>=50 ? '先事后人：先讲逻辑后顾影响' : '先人后事：先稳定情绪再论方案');
				arr.push((d.JP||0)>=50 ? '愿先定节拍器与闭环' : '愿先探索后形成结论');
				return arr;
			}
		}
	}
</script>

<style lang="scss">
	.page { padding: 0 24rpx 24rpx; }
	.title { font-size: 32rpx; color: $brand-color-heading; margin-bottom: 8rpx; }
	.empty { color: $brand-color-muted; }
	.fancy-border { position: relative; }
	.fancy-border::before { content:''; position:absolute; inset: -1rpx; border-radius: $brand-radius-lg; padding:1rpx; background: linear-gradient(135deg, rgba($brand-color-primary,0.35), rgba(255,255,255,0)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
	.hero { display:flex; flex-direction: column; align-items:flex-start; gap: 6rpx; padding-bottom: 8rpx; border-bottom: 1rpx solid $brand-color-border; margin-bottom: 12rpx; }
	.hero-illus { width: 100%; height: 360rpx; border-radius: 24rpx; box-shadow: $brand-shadow-layer; margin-bottom: 12rpx; }
	@media (min-width: 600px) { .hero-illus { height: 420rpx; } }
	.type-badge { display:inline-flex; align-items:center; justify-content:center; padding: 6rpx 14rpx; border-radius: 9999rpx; background: rgba($brand-color-primary, 0.1); color: $brand-color-primary; font-weight: 600; }
	.hero-title { font-size: 40rpx; font-weight: 700; color: $brand-color-heading; }
	.hero-sub { font-size: 24rpx; }
	.badge-row { display:flex; flex-wrap: wrap; gap: 8rpx; margin-top: 6rpx; }
	.split-badge { display:flex; align-items:center; gap: 8rpx; padding: 6rpx 10rpx; border:1rpx solid $brand-color-border; border-radius: 9999rpx; background:#fff; box-shadow: $brand-shadow-card; }
	.split-track { width: 160rpx; height: 12rpx; background: $brand-color-border; border-radius: 9999rpx; overflow: hidden; }
	.split-fill { height: 100%; background: $brand-color-primary; transition: width $brand-dur-med $brand-ease-standard; }
	.tags { display:flex; flex-wrap: wrap; gap: 8rpx; margin-top: 6rpx; }
	.tag-chip { padding: 6rpx 12rpx; border-radius: 9999rpx; background: rgba($brand-color-primary, 0.08); color: $brand-color-primary; font-size: 22rpx; }
	.feature-card { margin: 10rpx 0 12rpx; padding: 12rpx; border-radius: $brand-radius-lg; background: linear-gradient(135deg, rgba($brand-color-primary,0.12), rgba($brand-color-primary,0.02)); border: 1rpx solid $brand-color-border; }
	.feature-title { font-size: 28rpx; font-weight: 700; color: $brand-color-heading; display:block; margin-bottom: 6rpx; }
	.feature-paras { display:flex; flex-direction: column; gap: 6rpx; }
	.feature-desc { color: $brand-color-text; }
	.dim-grid { display:grid; grid-template-columns: 1fr; gap: 12rpx; margin: 8rpx 0 12rpx; }
	@media (min-width: 600px) { .dim-grid { grid-template-columns: 1fr 1fr; } }
	.dim-card { border: 1rpx solid $brand-color-border; border-radius: $brand-radius-lg; padding: 12rpx; background: #fff; box-shadow: $brand-shadow-card; }
	.dim-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 8rpx; }
	.dim-name { color: $brand-color-heading; font-weight: 600; }
	.dim-pct { color: $brand-color-primary; font-weight: 600; }
	.track { width: 100%; height: 14rpx; background: $brand-color-border; border-radius: $brand-radius-sm; overflow: hidden; margin: 6rpx 0; }
	.fill { height: 100%; background: $brand-color-primary; transition: width $brand-dur-med $brand-ease-standard; }
	.dim-desc { font-size: 24rpx; }
	.section { margin-top: 12rpx; }
	.section.sep { border-top: 1rpx dashed $brand-color-border; padding-top: 12rpx; }
	.section-title { font-size: 28rpx; font-weight: 700; color: $brand-color-heading; margin-bottom: 8rpx; display:block; }
	.bullet-list { display:flex; flex-direction: column; gap: 6rpx; }
	.bullet { color: $brand-color-text; }
	.actions { margin-top: 16rpx; display: flex; flex-direction: column; gap: 12rpx; align-items: center; }
	.btn-wide { width: 72%; max-width: 560rpx; margin: 0 auto; }
	.actions .btn { align-self: center; }
	.disclaimer { margin-top: 8rpx; font-size: 22rpx; }
</style> 